<template>
  <!--首页展示的博客列表-->
  <div class="blogContainer">
    <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="blogList" class="blog-item">
      <!--flipInX lightSpeedIn-->
      <a-list-item slot="renderItem" slot-scope="item, index" @mouseenter="blogItemEnter(item.id)"
                   @mouseleave="blogItemLeave(item.id)" @click="blogItemClick(item.id)"
                   :class="blogItemShadow(item.id)" class="animated fadeInUp" style="padding: 20px 20px;">
        <template slot="actions">
          <span key="eye">
          <a-icon type="eye" style="margin-right: 8px"/>
          {{item.viewCount}}
        </span>
          <span key="like-o">
          <a-icon type="like-o" style="margin-right: 8px"/>
          {{item.starCount}}
        </span>
          <span key="message">
          <a-icon type="message" style="margin-right: 8px;"/>
          {{item.commentCount}}
        </span>

        </template>
        <!--博文封面图片-->
        <!--:class="activeItemClass(item.id)"-->
        <div v-if="device==='desktop'" class="overimg" slot="extra">
          <img
            width="200"
            alt="logo"
            style="margin-top: 26px;"
            :src="item.coverUrl"
          />
          <i class="light"></i>
        </div>

        <img v-if="item.top==='1'" src="/images/icon/top.png" style="position: absolute;right: 0px;top:0px;"/>
        <a-list-item-meta :description="blogCategoryTagsInfo(item)">
          <!--标题-->
          <div slot="title" :href="`/blog/page/`+item.id" target="_blank">
            <span class="super-link">{{item.title}}</span>
          </div>
          <!--头像-->
          <!--<a-avatar slot="avatar" :src="item.avatar" />-->
        </a-list-item-meta>
        <div style="font-weight: bold">
          {{item.introduction.length>90?item.introduction.substring(0,90):item.introduction}}
        </div>
      </a-list-item>
      <!--底部-->
      <div v-if="!seldomBlogData" slot="footer"><b>Power By </b>kiwipeach</div>
    </a-list>
    <BlogRecommend></BlogRecommend>
  </div>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  import BlogRecommend from '@/components/Blog/BlogRecommend'

  export default {
    components: {
      BlogRecommend
    },
    data() {
      return {
        activeItemId: ''
      }
    },
    computed: {
      ...mapGetters(['blogPageData', 'device', 'condition']),
      blogList: function() {
        return this.blogPageData.records
      },
      pagination: function() {
        // 由于异步未加载时问题
        if (this.blogPageData.length === 0) {
          return false
        }
        let total = this.blogPageData.total
        let pageSize = this.blogPageData.size
        if (this.seldomBlogData && total <= pageSize) {
          return false
        } else {
          return {
            onChange: (page, pageSize) => {
              let tagId = this.condition.tagId
              let categoryId = this.condition.categoryId
              this.$store.dispatch('setBlogPageData', { current: page, size: 6, tagId, categoryId })
            },
            total,
            pageSize
          }
        }
      },
      /**
       * 查询结果是否很少（查询数据条数小于分页大小）
       */
      seldomBlogData: function() {
        const total = this.blogPageData.total
        const size = this.blogPageData.size
        return (total < size) ? true : false
      }
    },
    created() {
      this.$store.dispatch('setCarousel', true)
      this.$store.dispatch('setBlogPageData', { current: 1, size: 6 })
    },
    methods: {
      ...mapActions(['setBlogItemHoverStatus']),
      /**
       * 当前博客的title显示格式化
       */
      blogCategoryTagsInfo(blog) {
        let tagList = _.map(blog.blogTagList, function(item) {
          return item.name
        })
        let tagInfo = tagList.length > 0 ? `标签:${tagList.join(',')}` : ''
        if (this.device === 'desktop') {
          return `分类：${blog.categoryName ? blog.categoryName : '无'}　${tagInfo}  发表于:${blog.createTime}`
        } else {
          return tagInfo
        }
      },
      /**
       * 博客列表项点击
       */
      blogItemClick(id) {
        this.$router.push(`/blog/page/${id}`)
        //let blogId = this.$route.params.blogId
      },
      /**
       * 判断当前博客是否激活
       */
      blogItemShadow(id) {
        return this.activeItemId === id ? 'blogItemShadow' : ''
      },
      /**
       * 判断当前博客是否激活
       */
      activeItemClass(id) {
        return this.activeItemId === id ? 'animated pulse activeClass' : ''
      },
      /**
       * 鼠标进入
       */
      blogItemEnter(id) {
        this.activeItemId = id
        // this.$store.dispatch('setBlogItemHoverStatus', false)
      },
      /**
       * 鼠标离开
       */
      blogItemLeave(id) {
        this.activeItemId = ''
        //this.$store.dispatch('setBlogItemHoverStatus', true)
      }
    }
  }
</script>
<style>
  /*鼠标移动激活的阴影*/
  .blogItemShadow {
    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
  }

  .ant-list-vertical .ant-list-item-main {
    font-size: 18px;
  }

  .ant-list-vertical .ant-list-item-meta-title {
    font-size: 30px;
  }

  .ant-list-split .ant-list-item {
    border-bottom: none;
  }

  .super-link {
    position: relative;
    text-decoration: none;
    color: #000;
  }

  /*伪元素是两个冒号*/
  .super-link::after {
    content: '';

    width: 100%;
    height: 2px; /*设置伪元素的高度，这里是下划线的粗细*/
    position: absolute;
    top: 100%;
    left: 0;

    background-color: currentColor; /*当前标签继承的文字颜色，这里让伪元素的背景色与父元素的文字颜色相同*/
    transform: scale(0);
    transition: all .35s;
  }

  .super-link:hover::after {
    transform: scale(1);
  }


  .overimg {
    position: relative;
    display: block;
    overflow: hidden;
    box-shadow: 0 0 10px #FFF;
  }

  .light {
    cursor: pointer;
    position: absolute;
    left: -200px;
    top: 0;
    width: 200px;
    height: 180px;
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
  }

  .overimg:hover .light {
    left: 0px;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
</style>
